<template>
	<div class="inceter_right_cent">
		<div class="inceter_right_cent_liIMg"   v-if="$route.name  != '师资力量'" v-for="(item,index) in list" :key="index">
			<img class="infont"  src="../../static/img/news_title.png"/>
			<div class="dis" style="justify-content: space-between;" @click="pathClick(index,item)" >
				<div class="itemspans sp">{{item.title}}</div>
				<div style="text-align: right;overflow: hidden;height: 20px;color: #333333;width: 120px;" >{{item.createTime}}</div>
			</div>
		</div>
		<div class="inceter_right_cent_liIMgss"  style="text-align: center;" v-if="$route.name  == '师资力量'">
			<div class="imgList"  v-for="(item,index) in ImageList" :key="index">
				<img class="item_img" :src="API+item.tcImg"/>
				<p >{{item.tcName}}</p>
			</div>
		</div>
		<aPage :size="size" :page="page" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
	</div>
</template>

<script>
	export default {
		name:'aList',
		data(){
			return {
				list:[],
				size: 24,
				page: 1,
				total: 0,
				ImageList:[],
				API:''
			}
		},
		created() {
			this.API =  process.env.KERNEL
		},
		beforeDestroy() {
			this.list = []
		},
		methods:{
			pathClick(i,v){
        console.log("111",v)
        if(this.$store.state.print.devic>750){
          this.$router.push({path:'/details/index',query:{id:v.id,name:v.title,tagId:v.tagsList[0].id}})
        } else {
          this.$router.push({path:'/detail/index',query:{id:v.id,name:v.title,tagId:v.tagsList[0].id}})
        }
			},
			handleSizeChange(val) {
				this.size = val
        console.log('ssss',)
				this.$route.name != '师资力量' ? this.getCampusList() : this.teacherList()
			},
			handleCurrentChange(val) {
				this.page = val
        console.log('sss5s',val)
				this.$route.name != '师资力量' ? this.getCampusList() : this.teacherList()
			},
			getCampusList() {

				var that = this
				var data = {
					categoryId: that.$tab.Tablist(that.$route.name),
					tagId: that.$store.state.print.tagId ,
					pageNum: that.page,
					pageSize: that.size
				}
				that.$api.articleList(data).then(res => {
					if (res.code == 200) {
						that.list = res.rows
						that.total = res.total
					}
				})
			},
			//师资力量
			teacherList(){
				var that = this
				var data = {
					pageNum: that.page,
					pageSize: that.size
				}
				that.$api.teacherList(data).then(res => {
					if(res.code == 200) {
						that.ImageList = res.rows
						that.total = res.total
					}
				})
			},
		}
	}
</script>

<style scoped>
	.inceter_right_cent{
		padding: 10px;
	}
	.inceter_right_cent_liIMg{
		display: flex;
		/* flex-wrap: wrap; */
		align-items: center;
		border-bottom: 1px solid #cccccc;
		padding: 0px 10px;
		font-size: 15px;
	}
	.dis{
		display: flex;
		align-items: center;
		width: 100%;
    font-size: 16px;
    padding: 15px;
		justify-content: space-between;
	}
	.itemspans {
		width: 300px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
    cursor: pointer;
	}
	.itemspans:hover{
		text-decoration: underline;
		color: #ea4410;
	}

	.infont{
		width: 7px;
		height: 7px;
		margin-right: 5px;
	}
	.inceter_right_cent_liIMgss{
		display: flex;
		flex-wrap: wrap;
		text-align: center;
	}
	.item_img{
		width: 100%;
		height: 147px;
	}

  .imgList{
     width: 15%;
     margin-left: 1.2%;
  }
	p{
		margin-bottom: 10px;
	}
</style>
